<template>
	<view class="framesSet">
		<comHead :title="$t('grzx.sysz')" :isLeft="true" :isRight="false"></comHead>
		<view class="list">

			<view class="item">
				<view class="l">
					<text>{{$t('grzx.bjyy')}}</text>
				</view>
				<view class="r" :class="isDisabled?'dis':''">
					<switch :disabled="isDisabled" :checked="bgmVal" color=" #0f9dfe" @change="bgmChange"/>
				</view>
			</view>
			<view class="item">
				<view class="l">
					<text>{{$t('grzx.ajtsy')}}</text>
				</view>
				<view class="r" :class="isDisabled?'dis':''">
					<switch :disabled="isDisabled" :checked="btnVal" color=" #0f9dfe" @change="btnChange"/>
				</view>
			</view>
			<view class="item">
				<view class="l">
					<text>{{$t('grzx.jy')}}</text>
				</view>
				<view class="r">
					<switch :checked="isMuted" color=" #0f9dfe" @change="muteChange" />
				</view>
			</view>
			<view class="item">
				<view class="tit">
					<text>{{$t('grzx.yl')}}</text>
					<text>{{parseInt(num * 100)}}%</text>
				</view>
				<view class="slideBox">
					<slider backgroundColor="rgba(255, 255, 255, 0.3725)" active-color="rgb(94,107,252)" block-color="#fff"
						block-size="16" :value="num" min="0" max="1" step="0.02" @changing="sliderChange" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 0.6,
				isMuted: false,
				bgmVal: true,
				btnVal: true,
				isDisabled: false,
			}
		},
		methods: {
			bgmChange(e){
				this.bgmVal = e.detail.value;
				this.$tools.setStore('volumeState', JSON.stringify({
					muted: this.isMuted,
					bgm: this.bgmVal,
					btn: this.btnVal
				}))
			  this.setVolume()
			},
			btnChange(e){
				this.btnVal = e.detail.value;
				this.$tools.setStore('volumeState', JSON.stringify({
					muted: this.isMuted,
					bgm: this.bgmVal,
					btn: this.btnVal
				}))
			},
			muteChange(e) {
				this.isDisabled = e.detail.value;
				this.isMuted = e.detail.value;
				this.$tools.setStore('volumeState', JSON.stringify({
					muted: this.isMuted,
					bgm: this.bgmVal,
					btn: this.btnVal
				}))
				this.setVolume()
			},
			setVolume() {
				this.$music.bgmInstance.volume = this.bgmVal?this.isMuted?0:this.num:0;
			},
			sliderChange(e) {
				this.num = e.detail.value
				this.$tools.setStore('volume', this.num)
				this.setVolume()
			}
		},
		onReady() {
			const state = JSON.parse(this.$tools.getStore('volumeState') || '{"muted": false,"bgm": true,"btn": true}');
			this.isMuted = state.muted;
			this.bgmVal = state.bgm;
			this.btnVal = state.btn;
			this.num = this.$tools.getStore('volume')!==''?this.$tools.getStore('volume'):0.6;
		}
	}
</script>

<style lang="less" scoped>
	.framesSet {
		height: 100vh;


		.list {
			padding: 30rpx;
			box-sizing: border-box;

			.item {
				padding: 40rpx 30rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;
				background-color: rgba(40, 46, 81, .6);
				border-radius: 20rpx;
				margin-bottom: 20rpx;

				.tit {
					width: 100%;
					padding: 30rpx;
					box-sizing: border-box;
					font-size: 32rpx;
					color: rgba(255, 255, 255, 0.5451);
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.slideBox {
					width: 100%;

					/deep/uni-slider .uni-slider-handle-wrapper {
						height: 14rpx;
					}

					/deep/uni-slider .uni-slider-track {
						background: linear-gradient(270deg, #5F58FD 0%, #62B6FC 100%);
					}
				}

				.l {
					display: flex;
					flex-direction: column;

					text {
						color: #D8D8D8;
						font-size: 32rpx;

						&:nth-child(2) {
							color: rgba(#fff, 0.5);
							font-size: 24rpx;
							margin-top: 20rpx;
						}
					}
				}

				.r {
					&.dis{
						opacity: .4;
					}
					switch {
						transform: scale(0.7);
						transform-origin: 100% 50%;
					}
				}
			}
		}
	}
</style>